<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>秒杀详情</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="panel panel-default text-center">
        <div class="panel-heading">
            <h1 th:text="${seckill.name}"></h1>
        </div>
        <div class="panel-body">
            <h2 class="text-danger">
                <span class="glyphicon glyphicon-time"></span>
                <span class="glyphicon" id="seckill-box"></span>
            </h2>
        </div>
    </div>
</div>
<div id="killMobileModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title text-center">
                    <span class="glphyicon glphyicon-phone"></span>秒杀电话:
                </h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <input type="text" name="userMobile" id="userMobileKey" placeholder="填手机号^O^" class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span id="userMobileMessage" class="glyphicon"></span>
                <button type="button" id="userMobileBtn" class="btn btn-success">
                    <span class="glyphicon glyphicon-phone"></span>Submit
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>
<script th:src="@{/script/seckill.js}"></script>
<script th:inline="javascript">
    var contextPath = /*[[@{/}]]*/ '/';

    var seckillId = /*[[${seckill.id}]]*/ '';
    var startTime = /*[[${seckill.startTimeMillis}]]*/ '';
    var endTime = /*[[${seckill.endTimeMillis}]]*/ '';

    seckill.detail.init({
        seckillId: seckillId,
        startTime: startTime,
        endTime: endTime
    });
</script>
</html>